<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="ui,gui,prototyping,designer,builder,rad,ria,spa,no-code,codeless,without coding,programming,development,drag and drop,web application,build app,create app,make app" />
    <meta name="description" content="Powered by CrossUI No-Code App Builder - Create Interactive App Without Coding" />
    <meta name="copyright" content="copyright@crossui.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Powered by CrossUI No-Code App Builder - Examples - Render to</title>
</head>
    <body>
        <div id="loading" style="position:fixed;width:100%;text-align:center;"><img src="../../../../runtime/loading.gif" alt="Loading..." /></div>
        <div id='dialog' style='position:absolute;border:dashed 1px;left:100px;top:100px;width:200px;height:200px;'>Will be replaced by a dialog</div>
        <div id='datepicker' style='position:absolute;border:dashed 1px;left:400px;top:100px;width:250px;height:200px;'>Will append a datepicker</div>        
        
        <button id='cmd' style='position:absolute;left:100px;top:25px;'>Render</button>       

        <script type="text/javascript" src="../../../../runtime/xui/js/xui-debug.js"></script>
        <script type="text/javascript">
            xui.main(function(){
                xui('loading').remove();
                xui('cmd').onClick(function(){
                    var dlg=new xui.UI.Dialog;
                    dlg.append( new xui.UI.ColorPicker);
                    dlg.renderOnto('dialog');
            
                    xui('datepicker').append(new xui.UI.DatePicker);
                });
            });
        </script>
</body>
</html>